<template>
  <div class="userProfile">
    <div class="upBox">
      <div class="img">
        <slot name="avatar"></slot>
      </div>
      <div class="rightDes">
        <span>呵护对象：<slot name="careP"></slot></span>
        <span>性别：<slot name="gender"></slot></span>
        <span>年龄：<slot name="age"></slot></span>
        <span>家长：<slot name="parent"></slot></span>
        <span>教师：<slot name="teacher"></slot></span>
        <span>居委会：<slot name="neicom"></slot></span>
      </div>
    </div>
    <div class="downBox">
      <p>基本信息：<slot name="info"></slot></p>
      <p>家庭情况：<slot name="fam"></slot></p>
      <p>教育情况：<slot name="edu"></slot></p>
    </div>
  </div>
</template>
<script>
export default {
  components: {}
}
</script>
<style lang="less" scoped>
.userProfile {
  width: 20vw;
  height: 100%;
  margin: 10vh 7.5vw;
  float: left;
  border-radius: 2vw;
  overflow: hidden;
  background-color: #b41e1d;
  border: 1px solid #ff000e;
  .upBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .img {
      // margin: 30px 0 20px 10px;
      width: 120px;
      height: 160px;
    }
    .rightDes {
      display: flex;
      flex-direction: column;
      padding-left: 4px;
      color: #eeb109;
      font-size: 12px;
      span {
        padding-bottom: 3px;
      }
    }
  }
  .downBox {
    margin-top: 10px;
    font-size: 10px;
    color: #eeb109;
    p {
      padding-bottom: 20px;
    }
  }
}
</style>
